<template>
  <div class="vs-code-tip" :class="[systemSettingStore.$state.deskAppRangeType]">
    <img src="@/assets/images/app/vsCode.png" alt="vsCode" class="logo" />
    <ul class="tool">
      <li>文件(F)</li>
      <li>编辑(E)</li>
      <li>选择(S)</li>
      <li>查看(V)</li>
      <li>转到(G)</li>
      <li>运行(R)</li>
      <li>终端(T)</li>
      <li>帮助(H)</li>
    </ul>
    <system-child-btn />
  </div>
</template>

<script setup lang="ts">
import SystemChildBtn from '@/base/systemWindow/systemChildBtn.vue'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'

const systemSettingStore = useSystemSettingStore()
</script>

<style scoped lang="scss">
@import '@/assets/scss/mixin';

.vs-code-tip {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: rgb(24, 24, 24);
  border-bottom: 1px solid rgb(43, 43, 43);
  display: flex;
  align-items: center;

  &.ios {
    padding-left: 70px;
  }

  .logo {
    margin: 10px 20px;
    width: 20px;
    height: 20px;
    object-fit: contain;
    object-position: center;
  }

  .tool {
    width: 60%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    > li {
      margin-right: 20px;
    }
  }
}
</style>
